import React, { PureComponent } from "react";
import styles from "./index.less";

/*
 * 组件注释
 * create by wuqiong
 * creation time 2022/02/11
 * Ueditor组件
 * */
class Ueditor extends PureComponent {
  constructor(props) {
    super(props);
    this.editor = null;
    this.state = {
      value: props.value,
      id: props.id,
    };
  }

  getContent = () => {
    return this.editor.getContent();
  };
  setContent = value => {
    return this.editor.setContent(value);
  };

  componentDidMount() {
    // // 防止二次刷新
    // if (editorRef.current) return;
    let { value } = this.props;
    let UE = window.UE;

    UE.getEditor = (id, opt) => {
      if (this.editor) {
        try {
          UE.delEditor(id);
        } catch (e) {
          // console.log(e);
        }
      }
      let editor = new UE.ui.Editor(opt);
      editor.render(id);
      return editor;
    };

    var ue = UE.getEditor(this.props.id, {
      initialFrameHeight: this.props.height || 300,
      // serverUrl: '/api/uefile/manage/action',
      toolbars: [
        [
          "undo", //撤销
          "redo", //重做
          "bold", //加粗
          "italic", //斜体
          "underline", //下划线
          "strikethrough", //删除线
          "subscript", //下标
          "superscript", //上标
          "source", //源代码
          "blockquote", //引用
          //'pasteplain', //纯文本粘贴模式
          "horizontal", //分隔线
          "removeformat", //清除格式
          "unlink", //取消链接
          "inserttitle", //插入标题
          // 'simpleupload', //单图上传
          "insertimage", //多图上传
          "link", //超链接
          //'emotion', //表情
          //'spechars', //特殊字符
          //'searchreplace', //查询替换
          //'map', //Baidu地图
          //'insertvideo', //视频
          "justifyleft", //居左对齐
          "justifyright", //居右对齐
          "justifycenter", //居中对齐
          "justifyjustify", //两端对齐
          //'fullscreen', //全屏
          "imagecenter", //居中
          "edittip ", //编辑提示
          //'customstyle', //自定义标题
          "background", //背景
          // 'scrawl', //涂鸦
          // 'music', //音乐
          "inserttable", //插入表格
          "drafts", // 从草稿箱加载
          //'charts', // 图表
          "fontfamily", //字体
          "fontsize", //字号
          //'insertcode', //代码语言
          "insertorderedlist", //有序列表
          "insertunorderedlist", //无序列表
          "lineheight", //行间距
          "rowspacingtop", //段前距
          "rowspacingbottom", //段后距
          "forecolor", //字体颜色
          "backcolor", //背景色
          //'preview', //预览
        ],
      ],
    });

    // 监听内容改变
    ue.addListener("selectionchange", () => {
      this.props.onChange && this.props.onChange(this.getContent());
    });
    this.editor = ue;
    this.editor.ready(() => {
      this.props.disabled && this.editor.setDisabled();
      this.editor.setContent(value);
    });
  }

  // componentWillUnmount() {
  //     if(window.UE.getEditor(this.props.id)){
  //         window.UE.getEditor(this.props.id).destroy();
  //         window.UE.delEditor(this.props.id)
  //     }
  // }

  render() {
    return (
      <textarea
        className={styles.editorContent}
        id={this.props.id}
        name="blog"
        type="text/plain"
        style={{ width: "100%", height: "100%" }}></textarea>
    );
  }
}
export default Ueditor;
